<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>视频直播</title>
 <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
 <!-- video UI框架，样式要前端自己调整 -->
 <script src="./js/video.min.js"></script>
 <style>
  video {
   width: 300px;
   height: 300px;
  }
  .parent {
   position: relative;
  }

  .parent #recordButton,
  #recordButton {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 100px;
   transform: translate(0%, -50%);
  }

  .between {
   display: flex;
   justify-content: space-between;
  }

.video-js {
  /* 设置播放器的宽度和高度 */
  width: 640px;
  height: 360px;
}
 
.vjs-control-bar {
  /* 设置控制条的背景颜色 */
  background-color: #333;
}
 
.vjs-play-progress {
  /* 设置播放进度条的颜色 */
  background-color: #ff6600;
}
 </style>
</head>

<body>
 <br />
 <div class="between">
  <div class="parent">
   <div>用户录制直播</div>
   <span>hls.js 插件</span>
   <video height="350" width="400" autoplay controls id="my-player">
    <source src="" type="application/x-mpegURL">
    <!-- src="http://example.com/path/to/your/stream.m3u8" -->
    <!-- 您的浏览器不支持HTML5视频。 -->
   </video>
   <!-- <button id="recordButton">开始录制</button> -->
   <!-- <button id="stopButton">停止录制</button> -->
   <!-- 添加关闭直播按钮 -->
   <!-- <button id="closeButton">关闭直播</button> -->
  </div>
  <div class="parent">
   <div>用户获取直播视频</div>
   <span>video.js 插件</span>
   <video preload="auto" height="350" width="400" controls autoplay id="broat">
    <source src="http://localhost:8000/video/test1.m3u8" type="application/x-mpegURL">
    <!-- <source src="http://localhost:8000/video/WIN_20230705_22_45_31_Pro.mp4" type="application/x-mpegURL"> -->
   </video>
   <!-- <button id="recordButton">查看直播</button> -->
  </div>
 </div>
 <script src="./js/hls.js"></script>
 <script>
  var video = document.getElementById('my-player');
  if (Hls.isSupported()) {
   let options = {
    levelTargetDuration: 5, // 设置目标缓冲时间为5秒
    maxBufferLength: 60, // 设置最大缓冲长度为60秒
    minBufferLength: 3, // 设置最小缓冲长度为60秒
    retry: {
     retries: 5,
     backoff: 'exponential', // 重试间隔策略
     backoffFactor: 1,
     maxRetryTime: 10, // 最大重试（秒）
     maxRetryDelay: 10,// 最大重试延迟（秒）
    }

   };
   var hls = new Hls(options);
  //  video.addEventListener('timeupdate', function () {
  //   if (video.paused || video.ended) return;
  //   if (video.currentTime + 2 < video.buffered.end(0)) {
  //    console.log('Playback is stalling, reloading stream.');
  //    hls.destroy();
  //    hls = new Hls(options);
  //    hls.loadSource(hlsUrl);
  //    hls.attachMedia(video);
  //   }
  //  });
   hls.loadSource('http://localhost:8000/video/test1.m3u8');
   hls.attachMedia(video);
   hls.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play();
   });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
   // 如果浏览器原生支持HLS
   video.src = 'http://localhost:8000/video/test1.m3u8';
   video.addEventListener('loadedmetadata', function () {
    video.play();
   });
  }

  // video.js
  var options = {};
  var player = videojs('broat', options, function onPlayerReady () {
   videojs.log('Your player is ready!');
   // In this context, `this` is the player that was created by Video.js.
   // this.play();
   // How about an event listener?
   this.on('ended', function () {
    videojs.log('Awww...over so soon?!');
   });
  });
 </script>
</body>

</html>